<template>
  <div id="search-map">
    <baidu-map class="BMap" :center="center" :ak="ak" :zoom="zoom">
      <bm-control>
        <div class="controls m-3">
          <div class="mainControl" flex>
            <div v-show="editing">
              <el-select
                v-model="keyword"
                filterable
                remote
                @change="setPoint"
                reserve-keyword
                placeholder="请输入地名关键词"
                :remote-method="searchPlace"
              >
                <el-option
                  v-for="item in places"
                  :key="item.uid"
                  :label="item.name"
                  :value="item.uid"
                >
                </el-option>
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-select>
            </div>
          </div>
        </div>
      </bm-control>
      <bm-marker
        @dragend="dragPoint"
        :position="center"
        :dragging="editing"
        :animation="editing ? '' : 'BMAP_ANIMATION_BOUNCE'"
      >
      </bm-marker>
    </baidu-map>

    <!-- <qzl-searchMap
      @change="
        (coordinate, params) => {
          (form.locations = coordinate), (currentPoint = params);
        }
      "
      :myPoint="form.location"
      :editing="true"
      :location="form.coordinates"
      :disabled="!isEdit"
    ></qzl-searchMap> -->
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import BmControl from "vue-baidu-map/components/controls/Control";
import BmMarker from "vue-baidu-map/components/overlays/Marker";
import { mapState } from "vuex";

export default {
  name: "others-map-map",
  components: {
    BaiduMap,
    BmControl,
    BmMarker,
  },
  data() {
    return {
      keyword: "",
      places: [],
      zoom: 16,
      center: {},
      isJtc: false,
      params: {},
      ak: "I5o6A7zZP9Ctuf1ThdyFUsjRIK9dH5zn",
    };
  },
  props: ["myPoint", "editing", "location"],
  computed: {},
  watch: {
    myPoint: {
      immediate: true,
      // deep: true,
      handler(val) {
        if (val && _.isString(val)) {
          let arr = val.split(",");
          this.center = {
            lng: arr[1],
            lat: arr[0],
          };
        }
      },
    },
    center: {
      deep: true,
      handler(val) {
        let newPointStr = this.center.lng + "," + this.center.lat;
        if (this.myPoint != newPointStr) {
          this.$emit("change", newPointStr, this.params);
        }
      },
    },
    location: {
      deep: true,
      immediate: true,
      handler(n, o) {
        if (n) {
          this.keyword = n;
          this.searchPlace(this.keyword, "edit");
        } else {
          this.center = {};
          this.keyword = "";
        }
      },
    },
  },
  methods: {
    // 地点搜索
    searchPlace(query, type) {
      if (query !== "") {
        this.$jsonp("https://api.map.baidu.com/place/v2/suggestion", {
          query,
          region: "全国",
          output: "json",
          ak: this.ak,
          scope: 2,
        }).then((res) => {
          this.places = res.result;
          if (type == "edit") {
            this.places.map((item) => {
              let _src = item.province + item.city + item.district + item.name;
              if (_src == this.keyword) {
                this.center = item.location;
                this.params = item;
              }
              console.log("item", item);
            });
          }
        });
      } else {
        this.places = [];
      }
    },
    setPoint(uid) {
      if (!uid) return;
      this.center = this.places.find((i) => i.uid == uid).location;
      this.params = this.places.find((i) => i.uid == uid);
    },
    dragPoint({ point }) {
      if (point) this.center = point;
    },
  },
};
</script>

<style scoped lang="scss">
#search-map {
  position: relative;

  ::v-deep img {
    max-width: none;
  }

  .BMap {
    width: 100%;
    height: 15rem;
  }
}
</style>
<style lang="scss">
.BMap_cpyCtrl span {
  display: none !important;
}
</style>
